<template>
    <view class="live-room-item">
        <view class="live-image" :style="{
            backgroundImage: 'url(http://t14.baidu.com/it/u=3373468059,521376810&fm=224&app=112&f=JPEG?w=500&h=500)'
        }">
            <view class="live-status flex ali-c">
                <image v-if="null" src="/static/live-play.png" mode="heightFix" />
                <image src="/static/live-replay.png" mode="heightFix" />
                <text style="margin-left: 6rpx;">7529人观看</text>
            </view>
            <view class="live-avatar" :style="{
                backgroundImage: 'url(http://t14.baidu.com/it/u=3373468059,521376810&fm=224&app=112&f=JPEG?w=500&h=500)'
            }"></view>
        </view>
        <view class="live-info">
            <view class="title one-line">雪花啤酒勇闯天涯</view>
            <view class="info one-line">冬天更要喝雪花啤酒</view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {

        }
    }
}
</script>
<style lang="scss">
.live-room-item {
    width: 100%;
    height: 500rpx;
    background-color: white;
    border-radius: 20rpx;
    overflow: hidden;

    .live-image {
        position: relative;
        height: 336rpx;
        background-repeat: no-repeat;
        background-size: cover;

        .live-status {
            height: 40rpx;
            background-color: rgba(0, 0, 0, .5);
            position: absolute;
            left: 16rpx;
            top: 16rpx;
            border-radius: 100px;
            width: 190rpx;

            text {
                color: white;
                font-size: 20rpx;
            }

            image {
                height: 100%;
            }
        }

        .live-avatar {
            position: absolute;
            bottom: -42rpx;
            left: 16rpx;
            height: 82rpx;
            width: 82rpx;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 100rpx;
        }

    }

    .live-info {
        padding: 24rpx;
        padding-top: 62rpx;

        .title {
            font-size: 30rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #222222;
            line-height: 32rpx;
        }

        .info {
            font-size: 26rpx;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #555555;
            line-height: 32rpx;
            margin-top: 20rpx;
        }
    }
}
</style>